// 主容器布局
.satellite-track-container {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	overflow: hidden;
}

// 轨道设计器侧边面板
.orbit-designer-panel {
	position: fixed;
	top: 0;
	right: -420px; // 默认隐藏在右侧
	width: 420px;
	min-width: 380px;
	height: 100vh;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-left: 2px solid #dee2e6;
	box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(10px);

	&.panel-visible {
		right: 0; // 显示时滑入
	}

	.panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 2px solid #e4e7ed;
		background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

		h3 {
			margin: 0;
			font-size: 16px;
			font-weight: 600;
			color: #303133;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		}

		.close-button {
			padding: 6px;
			color: #909399;
			border-radius: 4px;
			transition: all 0.2s ease;

			&:hover {
				color: #409eff;
				background: rgba(64, 158, 255, 0.1);
				transform: scale(1.1);
			}
		}
	}

	.panel-content {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 0;
		
		// 自定义滚动条
		&::-webkit-scrollbar {
			width: 6px;
		}
		
		&::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 3px;
		}
		
		&::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 3px;
			
			&:hover {
				background: #a8a8a8;
			}
		}
	}
}

// 主视图容器
.main-view {
	width: 100%;
	height: 100vh;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	min-width: 0;

	&.with-panel {
		width: calc(100% - 420px); // 当面板显示时调整宽度
	}

	#cesiumContainer {
		width: 100%;
		height: 100%;
	}
}

// 响应式设计
@media (max-width: 1400px) {
	.orbit-designer-panel {
		width: 380px;
		right: -380px;
	}
	
	.main-view.with-panel {
		width: calc(100% - 380px);
	}
}

@media (max-width: 1200px) {
	.orbit-designer-panel {
		width: 360px;
		right: -360px;
	}
	
	.main-view.with-panel {
		width: calc(100% - 360px);
	}
}

@media (max-width: 768px) {
	.orbit-designer-panel {
		width: 100vw;
		right: -100vw;
		box-shadow: none;
		backdrop-filter: none;
	}
	
	.main-view.with-panel {
		width: 100%;
	}
}

#cesiumContainer {
	height: 100%;
}

.cesium-viewer-bottom {
	display: none;
}

.operate_container {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 999;
	display: flex;

	.menu_button {
		box-sizing: border-box;
		width: 32px;
		height: 32px;
		border-radius: 14%;
		padding: 0;
		vertical-align: middle;
		z-index: 0;
		position: relative;
		background: #303336;
		border: 1px solid #444;
		color: #edffff;
		fill: #edffff;
		cursor: pointer;
		margin-right: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu_button:hover {
		color: #fff;
		fill: #fff;
		background: #48b;
		border-color: #aef;
		box-shadow: 0 0 8px #fff;
	}

	.selected_button {
		box-sizing: border-box;
		width: 32px;
		height: 32px;
		border-radius: 14%;
		padding: 0;
		vertical-align: middle;
		z-index: 0;
		position: relative;
		background: #303336;
		border: 1px solid #444;
		color: #edffff;
		fill: #edffff;
		cursor: pointer;
		margin-right: 5px;
		display: flex;
		justify-content: center;
		align-items: center;

		.satellite_count {
			position: absolute;
			top: -8px;
			right: -8px;
			background: #f56c6c;
			color: white;
			border-radius: 50%;
			width: 18px;
			height: 18px;
			font-size: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}
	}

	.earth_rotation_button {
		box-sizing: border-box;
		width: 32px;
		height: 32px;
		border-radius: 14%;
		padding: 0;
		vertical-align: middle;
		z-index: 0;
		position: relative;
		background: #303336;
		border: 1px solid #444;
		color: #edffff;
		fill: #edffff;
		cursor: pointer;
		margin-right: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s ease;
	}

	.earth_rotation_button:hover {
		color: #fff;
		fill: #fff;
		background: #48b;
		border-color: #aef;
		box-shadow: 0 0 8px #fff;
	}

	.earth_rotation_button.active {
		color: #95D475;
		fill: #95D475;
		background: #2a4a2a;
		border-color: #95D475;
		box-shadow: 0 0 6px #95D475;
	}

	// 地球自转控制样式
	.rotation_controls {
		.control_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;

			.control_label {
				font-size: 14px;
				color: #edffff;
				font-weight: 500;
			}

			&:last-child {
				margin-bottom: 0;
				flex-direction: column;
				align-items: flex-start;
			}
		}
	}

	.cache_button {
		box-sizing: border-box;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		padding: 0;
		vertical-align: middle;
		z-index: 0;
		position: relative;
		background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.2));
		border: 2px solid #2196f3;
		color: #2196f3;
		fill: #2196f3;
		cursor: pointer;
		margin-right: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 3px 12px rgba(33, 150, 243, 0.25);
		overflow: hidden;
		backdrop-filter: blur(8px);

		&::before {
			content: '';
			position: absolute;
			top: -2px;
			left: -2px;
			right: -2px;
			bottom: -2px;
			border-radius: 50%;
			background: linear-gradient(45deg, #2196f3, #64b5f6, #2196f3);
			z-index: -1;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.cache_count {
			position: absolute;
			top: -6px;
			right: -6px;
			background: linear-gradient(135deg, #ff5722, #ff7043);
			color: white;
			border-radius: 50%;
			width: 18px;
			height: 18px;
			font-size: 9px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			box-shadow: 0 2px 6px rgba(255, 87, 34, 0.4);
			animation: pulse 2s infinite;
		}

		svg {
			width: 18px;
			height: 18px;
			transition: all 0.3s ease;
		}
	}

	.cache_button:hover {
		color: #64b5f6;
		fill: #64b5f6;
		background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(33, 150, 243, 0.3));
		border-color: #64b5f6;
		box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
		transform: scale(1.05);

		&::before {
			opacity: 1;
		}

		svg {
			transform: scale(1.1);
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			box-shadow: 0 2px 8px rgba(103, 194, 58, 0.4);
		}
		50% {
			transform: scale(1.1);
			box-shadow: 0 4px 15px rgba(103, 194, 58, 0.6);
		}
		100% {
			transform: scale(1);
			box-shadow: 0 2px 8px rgba(103, 194, 58, 0.4);
		}
	}

	.selected_button:hover {
		color: #fff;
		fill: #fff;
		background: #48b;
		border-color: #aef;
		box-shadow: 0 0 8px #fff;
	}
}

.add_satellite {
	display: flex;
	justify-content: center;
	padding: 10px;
	.upload_button {
		margin: 0 10px;
	}
}

.el-drawer {
	background-color: rgba($color: #303336, $alpha: 0.9);
	color: #fff;

	.satellite_type {
		color: #95d475;
		font-weight: bold;
		font-size: 14px;
		padding: 10px;
		padding-left: 0;
	}

	.el-drawer__header {
		background-color: #303336;
		color: inherit;
		margin: 0;
	}

	.el-checkbox {
		color: inherit;
	}

	// 卫星选择容器样式
	.satellite_selection_container {
		padding: 5px;
		height: 100%;
		overflow-y: auto;

		.satellite_category_table {
			margin-bottom: 24px;
			border-radius: 8px;
			overflow: hidden;
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(255, 255, 255, 0.1);

			.table_header {
				background: rgba(255, 255, 255, 0.05);
				font-weight: bold;
				font-size: 16px;
				padding: 12px 16px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				text-align: center;
			}

			.satellite_table {
				background: transparent;
				width: 480px;

				.el-table__header {
					background: rgba(255, 255, 255, 0.1);

					th {
						background: transparent !important;
						color: #fff !important;
						border-bottom: 1px solid rgba(255, 255, 255, 0.2);
						font-weight: 600;
					}
				}

				.el-table__body {
					tr {
						background: transparent;

						&:hover {
							background: rgba(255, 255, 255, 0.1) !important;
						}

						&.el-table__row--striped {
							background: rgba(255, 255, 255, 0.03) !important;

							&:hover {
								background: rgba(255, 255, 255, 0.1) !important;
							}
						}
					}

					td {
						background: transparent !important;
						color: #fff;
						border-bottom: 1px solid rgba(255, 255, 255, 0.1);
						padding: 8px 12px;

						.satellite_name {
							font-size: 14px;
							color: #e6e6e6;
						}

						.satellite_count {
							font-size: 12px;
							color: #95d475;
							font-weight: 500;
							background: rgba(149, 212, 117, 0.1);
							padding: 2px 6px;
							border-radius: 10px;
							display: inline-block;
							min-width: 20px;
							text-align: center;
						}

						.el-checkbox {
							.el-checkbox__input {
								.el-checkbox__inner {
									background: rgba(255, 255, 255, 0.1);
									border-color: rgba(255, 255, 255, 0.3);

									&:hover {
										border-color: #95d475;
									}
								}

								&.is-checked {
									.el-checkbox__inner {
										background: #95d475;
										border-color: #95d475;
									}
								}

								&.is-disabled {
									.el-checkbox__inner {
										background: rgba(255, 255, 255, 0.05);
										border-color: rgba(255, 255, 255, 0.1);
									}
								}
							}

							.el-checkbox__label {
								display: none;
							}
						}
					}
				}

				// 移除表格边框
				&::before {
					display: none;
				}
			}
		}
	}

	// 已选卫星列表样式
	.selected_satellites_container {
		padding: 5px;
		height: 100%;
		display: flex;
		flex-direction: column;

		.satellite_list {
			flex: 1;
			overflow-y: auto;

			.satellite_group {
				background: rgba(255, 255, 255, 0.1);
				border-radius: 8px;
				margin-bottom: 16px;
				border: 1px solid rgba(255, 255, 255, 0.2);
				overflow: hidden;

				.satellite_group_header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 12px 16px;
					background: rgba(255, 255, 255, 0.05);
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);
					min-height: 48px;

					.satellite_info {
						flex: 1;
						margin-right: 16px;
						min-width: 0; // 允许文字截断

						.satellite_name {
							font-weight: bold;
							font-size: 14px;
							color: #95d475;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.satellite_count_text {
							font-size: 12px;
							color: #ccc;
							margin-left: 8px;
						}
					}

					.satellite_controls {
						display: flex;
						align-items: center;
						gap: 10px;
						flex-shrink: 0;

						.visibility-switch {
							display: flex;
							align-items: center;
							gap: 8px;

							.switch-label {
								font-size: 12px;
								color: #e6e6e6;
								white-space: nowrap;
							}

							.el-switch {
								--el-switch-on-color: #95d475;
								--el-switch-off-color: #dcdfe6;
							}
						}

						.el-button {
							flex-shrink: 0;
							font-size: 11px;
							padding: 3px 8px;
						}
					}
				}

				.individual_satellites {
					padding: 8px 16px;

					.individual_satellite_item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 8px 0;
						border-bottom: 1px solid rgba(255, 255, 255, 0.1);

						&:last-child {
							border-bottom: none;
						}

						.satellite_info {
							flex: 1;

							.individual_satellite_name {
								font-size: 13px;
								color: #ccc;
								padding-left: 16px;
							}
						}

						.satellite_controls {
							display: flex;
							align-items: center;

							.el-switch {
								flex-shrink: 0;
							}
						}

						&:hover {
							background: rgba(255, 255, 255, 0.05);
						}
					}
				}

				&:hover {
					background: rgba(255, 255, 255, 0.12);
					border-color: rgba(255, 255, 255, 0.3);
				}
			}
		}

		.empty_state {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 40px 20px;
			color: #999;

			p {
				margin: 10px 0;
				font-size: 14px;
			}
		}
	}

	// 缓存管理样式
	.cache_management_container {
		padding: 15px;
		height: 100%;
		display: flex;
		flex-direction: column;

		.cache_list {
			flex: 1;
			overflow-y: auto;

			.cache_group {
				background: rgba(255, 255, 255, 0.1);
				border-radius: 8px;
				margin-bottom: 16px;
				border: 1px solid rgba(255, 255, 255, 0.2);
				overflow: hidden;

				.cache_group_header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 12px 16px;
					background: rgba(255, 255, 255, 0.05);
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);
					min-height: 48px;

					.cache_info {
						flex: 1;
						margin-right: 16px;
						min-width: 0;

						.cache_name {
							font-weight: bold;
							font-size: 14px;
							color: #95d475;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.cache_count_text {
							font-size: 12px;
							color: #ccc;
							margin-left: 8px;
						}
					}

					.cache_controls {
						display: flex;
						align-items: center;
						gap: 10px;
						flex-shrink: 0;

						.visibility-switch {
							display: flex;
							align-items: center;
							gap: 8px;

							.switch-label {
								font-size: 12px;
								color: #e6e6e6;
								white-space: nowrap;
							}

							.el-switch {
								--el-switch-on-color: #95d475;
								--el-switch-off-color: #dcdfe6;
							}
						}

						.el-button {
							flex-shrink: 0;
							font-size: 11px;
							padding: 3px 8px;
						}
					}
				}

				.cache_details {
					padding: 8px 16px;

					.cache_stats {
						.stat_item {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 8px 0;
							border-bottom: 1px solid rgba(255, 255, 255, 0.1);

							&:last-child {
								border-bottom: none;
							}

							.stat_label {
								font-size: 12px;
								color: #ccc;
							}

							.stat_value {
								font-size: 12px;
								color: #95d475;
								font-weight: 500;
							}
						}
					}

					.update_progress {
						margin-bottom: 16px;
						padding: 15px;
						background: rgba(33, 150, 243, 0.1);
						border-radius: 8px;
						border: 1px solid rgba(33, 150, 243, 0.2);

						.el-progress {
							margin-bottom: 10px;

							.el-progress-bar__outer {
								background-color: rgba(255, 255, 255, 0.3);
								border-radius: 6px;
							}

							.el-progress-bar__inner {
								background: linear-gradient(90deg, #2196f3 0%, #64b5f6 100%);
								border-radius: 6px;
								transition: width 0.3s ease;
							}
						}

						.progress_text {
							margin: 0;
							color: #1976d2;
							font-size: 13px;
							font-weight: 500;
							text-align: center;
						}
					}
				}

				&:hover {
					background: rgba(255, 255, 255, 0.12);
				}
			}
			}
		}

		.empty_state {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 40px 20px;
			color: #999;

			p {
				margin: 10px 0;
				font-size: 14px;
			}
		}
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
}

// TLE数据对话框样式
:deep(.tle-data-dialog) {
	.el-message-box__content {
		font-family: 'Courier New', monospace;
		white-space: pre-line;
		font-size: 12px;
		line-height: 1.4;
		background-color: #f5f5f5;
		padding: 15px;
		border-radius: 4px;
		border: 1px solid #ddd;
	}
}

// TLE按钮样式
.tle_button {
	margin-right: 8px;
	font-size: 11px;
	padding: 4px 8px;
	min-width: 35px;
}

// 轨道预测设置样式
.orbit_prediction_section {
	.prediction_settings {
		padding: 16px;

		.setting_item {
			display: flex;
			align-items: center;
			margin-bottom: 16px;

			&:last-child {
				margin-bottom: 0;
			}

			.setting_label {
				font-size: 14px;
				color: #e6e6e6;
				margin-right: 12px;
				min-width: 80px;
				flex-shrink: 0;
			}

			.setting_value {
				font-size: 14px;
				color: #95d475;
				font-weight: bold;
			}

			.prediction_select {
				flex: 1;
				max-width: 150px;
			}

			.performance_warning {
				flex: 1;
				margin-left: 0;

				:deep(.el-alert__content) {
					font-size: 12px;
				}
			}
		}
	}
}
